<template>
  <div class="my-red-container">
    <Header
      title="红包管理"
    />
    <Tabs
      v-model="selectIndex"
      @change="onChange"
    >
      <Tab title="全部">
        <List
          finished-text="没有更多了"
          :finished="none"
          v-model="loading"
          :error="error"
          @load="loadMore"
        >
          <RedItem
            v-for="item in redList"
            :key="item.Id"
            :data="item"
          />
        </List>
      </Tab>
      <Tab title="未使用">
        <List
          finished-text="没有更多了"
          :finished="none"
          v-model="loading"
          :error="error"
          @load="loadMore"
        >
          <RedItem
            v-for="item in redList"
            :key="item.Id"
            :data="item"
          />
        </List>
      </Tab>
      <Tab title="已使用">
        <List
          finished-text="没有更多了"
          :finished="none"
          v-model="loading"
          :error="error"
          @load="loadMore"
        >
          <RedItem
            v-for="item in redList"
            :key="item.Id"
            :data="item"
          />
        </List>
      </Tab>
      <Tab title="已过期">
        <List
          finished-text="没有更多了"
          :finished="none"
          v-model="loading"
          :error="error"
          @load="loadMore"
        >
          <RedItem
            v-for="item in redList"
            :key="item.Id"
            :data="item"
          />
        </List>
      </Tab>
    </Tabs>
  </div>
</template>
<script>
import Header from '@/components/Header'
import RedItem from '@/components/RedItem'
import { Tab, Tabs, List } from 'vant';
export default {
  components: {
    Header,
    Tab,
    Tabs,
    List,
    RedItem
  },
  data() {
    return {
      selectIndex: 0,
      redList: [],
      none: false,
      loading: false,
      error: false,
      pagin: {
        page: 0,
        pagesize: 10
      }
    }
  },
  methods: {
    onChange() {
      this.error = this.loading = this.none = false;
      this.pagin.page = 0;
      this.redList = [];
    },
    getData() {
      const { pagin, selectIndex } = this;
      let status = selectIndex - 1;
      status = status === -1 ? '' : status;
      this.$http.my.coupon({
        ...pagin,
        status
      }).then(({ result }) => {
        if (result.length < 10) {
          this.none = true;
        } else {
          this.pagin.page += 1;
        }
        this.redList = this.redList.concat(result);
        this.loading = false;
      }).catch(() => {
        this.error = true;
        this.loading = false;
      })
    },
    loadMore() {
      this.getData();
    }
  }
}
</script>
<style lang="less" scoped>
.my-red-container{
  .coupon-item {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    font-size: 26px;
    background: #fff;
    border-radius: 10px;
    margin: 20px 20px 0;
  }

  .coupon-item-sum {
    width: 180px;
    text-align: center;
  }

  .coupon-item-price {
    color: #e51c24;
  }

  .coupon-item-price text {
    font-size: 36px;
  }

  .coupon-item-info {
    width: calc(100% - 200px);
    margin-left: 20px;
  }

  .coupon-item-name {
    font-size: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 42px;
    margin-bottom: 6px;
  }
}
</style>
